<template>
  <div class="option">
    <!-- <div v-for="(item, index) in options" :key="index" class="option_list">
      <span @click="addItem(item)">
        {{ showEdit ? '新建字段:' : '' }}
        {{ item }}</span
      ><span>
        mercury
        <i class="el-icon-edit-outline edit"></i>
        <i class="el-icon-delete edit"></i>
      </span>
    </div> -->
    <!-- no-match-text="无搜索项,重新搜索" -->
    <el-select @clear="clear" v-model="value" filterable default-first-option placeholder="请选择文章标签" clearable :filter-method="filterMethod">
      <el-option v-for="item in opt" :key="item" :label="item" :value="item">
        <span style="float: left"> {{ showEdit ? '添加标签:' : '' }}{{ item }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px"> <i class="el-icon-edit-outline edit" @click="edit($event, item)"></i> <i class="el-icon-delete edit"></i></span>
      </el-option>
      <!-- <el-option value="">
        <span style="float: left">新增标签</span>
        <span style="float: right; color: #8492a6; font-size: 13px"> <i class="el-icon-edit-outline edit" @click="edit($event, item)"></i> <i class="el-icon-delete edit"></i></span>
      </el-option> -->
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      showEdit: false,
      value: [],
      opt: []
    }
  },
  watch: {
    value(val) {
      console.log(val, 'val')
    }
  },
  methods: {
    listItem(val, flag) {
      console.log(val, 'val')
      this.options = val
      this.opt = val
      this.showEdit = flag
    },
    addItem(val) {
      this.$emit('addItem', val)
    },
    edit(e, item) {
      e.stopPropagation()
      console.log(item, 'item')
    },
    filterMethod(query) {
      if (query !== '') {
        //   this.loading = true;
        setTimeout(() => {
          //   this.loading = false
          this.opt = this.options.filter((item) => {
            return item.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
          if (this.opt.length <= 0) {
            this.showEdit = true
            this.opt.push(query)
            console.log('query', query)
          } else {
            this.showEdit = false
          }
        }, 200)
      } else {
        this.opt = this.options
        this.showEdit = false
      }
    },
    clear() {
      this.opt = this.options
      this.showEdit = false
    }
  }
}
</script>
<style lang="less" scoped>
.option {
  //   width: 100%;
  max-height: 140px;
  overflow: hidden;
  overflow-y: auto;
  background: #fff;
}
.option_list {
  margin: 5px 0;
  cursor: pointer;
  transition: all 0.3s ease-in;
  width: 100%;
}
// span {
//   float: left;
// }
.option_list:hover {
  background: #eee;
}
.edit {
  opacity: 0;
  transition: all 0.3s ease-in;
}
.option_list:hover .edit {
  //   display: block;
  opacity: 1;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover .edit {
  opacity: 1;
}
</style>
